<template>
	<div>
		<el-image
			class="preview-img-box"
			v-bind="$attrs"
			v-show="imgUrl"
			:preview-src-list="[imgUrl]"
			:preview-teleported="true"
			:src="imgUrl"
			:zoom-rate="1.2"
			:initial-index="4"
			:z-index="10000"
			:fit="fit"
		>
			<template #error>
				<div class="image-slot tc">
					<img :src="defaultFile" alt="点击下载" />
					<p>
						<el-tooltip class="box-item" effect="dark" :content="fileName" placement="top-start">
							<el-link type="primary" class="f14" @click="handleDowload">{{ fileName }}</el-link>
						</el-tooltip>
					</p>
				</div>
			</template>
		</el-image>
	</div>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue'
import { DowloadPreviewImage } from '@/utils/util'
import defaultFile from '@/assets/icons/defaultFile.png'
import FileSaver from 'file-saver'

type Props = {
	src?: string
	fit?: any
	showFileList?: boolean
}

const props = withDefaults(defineProps<Props>(), {
	fit: 'cover',
})
const imgUrl = ref('')
const fileName = ref(props.src?.slice(-12))
const getPreviewImage = async () => {
	if (props.src?.includes('ningxiang')) {
		const previewUrl = (await DowloadPreviewImage(props.src)) as string
		imgUrl.value = previewUrl
	} else {
		imgUrl.value = props.src
	}
}
watch(
	() => props.src,
	() => {
		getPreviewImage()
	},
	{
		immediate: true,
	}
)
const handleDowload = () => {
	FileSaver.saveAs(props.src, fileName)
}
</script>

<style scoped lang="scss">
.preview-img-box {
	width: 128px;
	height: 128px;
	.el-image {
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
